<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 全局组件在组件的任意位置都可以调用
		 局部组件只在指定的对象中进行调用-->
		 <div id="app">
			 <aaa></aaa>
			 <bbb></bbb>
		 </div>
		 <template id="aaaTem">
			 <div>
			 	<h1>{{msg}}</h1>
				<bbb></bbb>
			 </div>
		 </template>
		 <template id="bbbTem">
			 <div>
			 	<h1>{{msg}}</h1>
				<p>引用全局组件</p>
				<aaa></aaa>
			 </div>
		 </template>
		 <script src="../js/vue.js">
		 	
		 </script>
		 <script type="text/javascript">
		 	Vue.component("aaa",{
				data(){
					return{
						msg:"全局组件"
					}
				},
				template:"#aaaTem"
			})
			let bbb ={
				data(){
					return {
						msg:"局部组件"
					}
				},
				template:"#bbbTem"
			}
			const app = new Vue({
				el:"#app",
				components:{
					bbb
				}
			})
		 </script>
	</body>
</html>
